<style lang="less" scoped>

.main {
  .header {
    position:relative;
    width: 100%;
    height: 21.46vw;
    background: black;
    .header_img {
      position: absolute;
      left: 0px;
      top:0px;
      width: 100vw;
      background-size:100% 100%;
      height: 21.46vw;
    }
    .main_user{
      z-index: 9999;
      position: absolute; 
      top:0px;
      left:0px;
    }
  }
  .main_data{
    background: white;
    padding-left: 0.5vw;
    padding-right: 0.5vw;
    z-index: 1;
    width: 71vw;
    margin: auto;
    .main-xilie-img{
      cursor:pointer;
    }
    .xilie_title{
      width: 100%;
      text-align:center;
      font-size: 0.9vw;
      height: 2vw;
    }
    .seamless-warp{

      width: 100%;
      height: calc(100% - 16px);
      overflow: auto;
      height: 10vw;
    }
    .DataList_left{
      cursor:pointer;
      font-size: 0.9vw;
      margin-top: 0.3vw;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .DataList_left2{
      cursor:pointer;
      color: red;
      font-size: 0.9vw;
      margin-top: 0.3vw;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .DataList_left:hover{ color: red;}
    .zuixing_title{
      padding-top: 3vw;
      font-size: 1.5vw;
      height: 2.5vw;
    }
    .renwu_title{
      font-size: 1.5vw;
    }
    .xianshi_data{
      position:relative;
      border: 2px solid #dededd;
      border-radius: 15px 15px 0px 0px;
      height: 6vw;
      .img_julebu1{
        position: absolute;
        width:3vw;
        top:1.5vw;
        left: 1.5vw;;
      }
      .julebu1_data{
        width:18vw;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
        position: absolute;
        top:2.2vw;
        left: 4.8vw;
        font-size: 0.9vw;
      }
    }
    .jingbiao_data{
      cursor:pointer;
      position:relative;
      border-radius: 0px 0px 15px 15px;
      background: #858382;
      height: 6vw;
      .img_julebu2{
        position: absolute;
        width:2.5vw;
        top:1.75vw;
        left: 6.7vw;;
      }
      .julebu2_data{
        position: absolute;
        top:2.2vw;
        left: 11vw;
        font-size: 1.2vw;
        color: white;
      }
    }
    .jingbiao_data:hover{
      background: #dededd;
    }
    .zhixing_data{
      position:relative;
      
      .shejizhixing{
        .shejizhixing_img{
          cursor:pointer;
          width: 100%;
        }
      }
      .left_jiantou{
        cursor:pointer;
        background-image: url(../../images/left_jiantou.png);
        background-size:100% 100%;
        position: absolute;
        width: 1.5vw;
        height:5vw;
        left:-3vw;
        top:6vw;
      }
      .right_jiantou{
        cursor:pointer;
        background-image: url(../../images/right_jiantou.png);
        background-size:100% 100%;
        position: absolute;
        width: 1.5vw;
        height:5vw;
        left:72.5vw;
        top:6vw;
      }

    }
    .anli-img{
      cursor:pointer;
      width: 100%;
      height: 12.4vw;
    }
    .anli_title{
      width: 100%;
      text-align:center;
      font-size: 0.9vw;
      height: 3vw;
    }
    .shejizhixing_tishi{
      background-image: url(../../images/shejizhixing_tishi.png);
      background-size:100% 100%;
      width: 1.5vw;
      height: 1.5vw;
      margin-top: -1.7vw;
      margin-bottom: 0.2vw;
      margin-left: 69.5vw;
      cursor:pointer;
    }
  }
  .shangchuandata{
    .el-dialog__header{
      padding: 0px;
    }
  }
}

</style>
<template>
  <div class="main">
    <div class="header">
        <el-carousel :interval="8000" height="21.46vw">
          <el-carousel-item v-for="item in bannerlistdata" >
            <img :src="item.thumb" class="header_img"></img>
          </el-carousel-item>
        </el-carousel>
        
        <MainUser class="main_user"></MainUser>
    </div>
    <div style="height:3.2vw"></div>
    <affix style="margin-top:-3.2vw">
       <MainTitle style="width:99vw;" @cailiao="downcailiao" @sousuo="titleSousuo"></MainTitle>
    </affix>
    
    <div class="main_data">
      <div class="zuixing_title">最新系列</div>
      <el-row :gutter="20" >
        <el-col v-if="i<3" :span="8" v-for="(item,i) in seriesGallerys">
          <img :src="item.thumb" class="main-xilie-img" width="100%" height="100%" @click="zuixingxilie(item.id)">
          <div class="xilie_title">{{item.title}}</div>
        </img></el-col>
      </el-row>
      <div style="height:2vw;"></div>
      <el-row :gutter="20" v-if="sx">
        <el-col :span="8">
          <div class="renwu_title" >发布中</div>
          <!-- <div @click="xuanzeonum($event)" style="border: 1px solid #dededd;padding-left:5px;">
            <vue-seamless-scroll :data="designerdemanddata.bidding" class="seamless-warp" :class-option="classOption1">
              <div v-for="(item,index) in designerdemanddata.bidding" v-bind:class="{ 'DataList_left': item.id != xzonum.id, 'DataList_left2': item.id == xzonum.id}" :data-obj="JSON.stringify(item)" :id="index+1">{{item.onum}}{{item.title}}</div>
            </vue-seamless-scroll>
          </div> -->
            <div class="seamless-warp" style="border: 1px solid #dededd;padding-left:5px;">
              <div v-for="item in designerdemanddata.bidding" v-bind:class="{ 'DataList_left': item.id != xzonum.id, 'DataList_left2': item.id == xzonum.id}" @click="xuanzeonum1(item)">{{item.onum}}{{item.title}}</div>
            </div>
        </el-col>
        <el-col :span="8">
          <div class="renwu_title">设计中</div>
          <div @click="xuanzeonum($event)" style="border: 1px solid #dededd;">
            <vue-seamless-scroll :data="designerdemanddata.designering" class="seamless-warp" :class-option="classOption2">
                <div v-for="(item,index) in designerdemanddata.designering" v-bind:class="{ 'DataList_left': item.id != xzonum.id, 'DataList_left2': item.id == xzonum.id}" :data-obj="JSON.stringify(item)" :id="index+1">{{item.onum}}{{item.title}}</div>
            </vue-seamless-scroll>
          </div>
            
          </el-col>
        <el-col :span="8">
          <div class="renwu_title">已完成</div>
          <div @click="xuanzeonum($event)" style="border: 1px solid #dededd;">
            <vue-seamless-scroll :data="designerdemanddata.complete" class="seamless-warp" :class-option="classOption1">
              <div v-for="(item,index) in designerdemanddata.complete" v-bind:class="{ 'DataList_left': item.id != xzonum.id, 'DataList_left2': item.id == xzonum.id}" :data-obj="JSON.stringify(item)" :id="index+1">{{item.onum}}{{item.title}}</div>
            </vue-seamless-scroll>
          </div>
          </el-col>
      </el-row>
      <el-row  style="margin-top:2vw;" :gutter="20">
        <el-col :span="8">
          <div class="xianshi_data">
            <img class="img_julebu1" src="../../images/julebu1.png"/>
            <div class="julebu1_data">单号：{{xzonum.onum}}</div>
          </div>
          <div class="jingbiao_data" @click="showjingbiao">
            <img class="img_julebu2" src="../../images/julebu2.png"/>
            <div class="julebu2_data">我要竞标</div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="xianshi_data">
            <img class="img_julebu1" src="../../images/julebu1.png"/>
            <div class="julebu1_data">名称：{{xzonum.title}}</div>
          </div>
          <div class="jingbiao_data" @click="Downloaddesigner">
            <img class="img_julebu2" src="../../images/julebu3.png"/>
            <div class="julebu2_data">我要下载</div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="xianshi_data">
            <img class="img_julebu1" src="../../images/julebu1.png"/>
            <div class="julebu1_data">截止时间：{{xzonum.plan_finish_at}}</div>
          </div>
          <div class="jingbiao_data" @click="shangchuandesigner">
            <img class="img_julebu2" src="../../images/julebu4.png"/>
            <div class="julebu2_data">我要上传</div>
          </div>
        </el-col>
      </el-row>
      <div class="zuixing_title">设计之星</div>
      <el-popover
        placement="right-start"
        width="200"
        trigger="click">
        <div>设计之星显示规则（只显示下列三种）：</br>
            1、上一季度服务之星前2名</br>
            2、本季度的服务之星前2名</br>
            3、本季度的成长之星前1名</br>
            </br>
            上榜说明：</br>
            1、如上一季度和本季度均获得服务之星，则合并上榜</br>
            2、如当季度一人同时获得服务之星和成长之星，上榜服务之星，成长之星不上榜，成长之星上榜取第二名</br>
            3、如上一季度获得服务之星，本季度获得成长之星，上榜服务之星，成长之星不上榜，上榜取第二名</br>
            4、上上季度的榜单均不显示
          </div>
        <div class="shejizhixing_tishi" slot="reference"></div>
      </el-popover>
      
      <div class="zhixing_data">
          <swiper :options="swiperOption" class="re_swiper-container" ref="mySwiper">
              <!-- slides -->
              <swiper-slide class="swiper-item" v-for='item of designerstars' :key='item.id'>
                <div class="shejizhixing">
                  <img class="shejizhixing_img" :src="item.thumb" @click="shejizhixing"></img>
                </div>
              </swiper-slide>
          </swiper>
          <div class="left_jiantou" @click="xiayige"></div>
          <div class="right_jiantou" @click="shangyige"></div>
      </div>
      <div class="zuixing_title">经典案例</div>
      <el-row :gutter="20" v-loading="anliloading">
        <el-col :span="8" v-for="item in classiccases">
          <img class="anli-img" :src="item.thumb" @click="jingdiananli(item.id)"/>
          <div class="anli_title">{{item.title}}</div>
        </el-col>
      </el-row>
      <el-pagination
        background
        style="text-align: right"
        @current-change="handleCurrentChange"
        layout="prev, pager, next"
        :page-size="pagintion.page_size"
        :total="pagintion.total">
      </el-pagination>
      <div style="height:50px;"></div>
    </div>
    
    
    <el-dialog title="竞标"  :visible.sync="jingbiaoVisible" >
      <JingBiao @close="closejingbiao" ref="jingbiao"></JingBiao>
    </el-dialog>
    <div class="shangchuandata">
      <el-dialog :visible.sync="shangchuanVisible" width="40%">
        <ShangChuan @close="closeshangchuan" ref="shangchuan"></ShangChuan>
      </el-dialog>
    </div>

  </div>
</template>
<script>
const link = document.createElement('a')
// import Affix from '@/components/Affix';
import MainTitle from './main_title'
import MainUser from './main_user'
import JingBiao from './caozuo/jingbiao'
import ShangChuan from './caozuo/shangchuan'
import vueSeamlessScroll from 'vue-seamless-scroll'
import { bannerlist,seriesgallerylist,designerdemandlist,designerstarlist,classiccaselist,designerdownload,assumeRole} from '@/request/api';
export default {
  data() {
    return {
      bannerlistdata:[],
      designerdemanddata:{},
      xzonum:{},
      seriesGallerys:[],
      designerstars:[],
      classiccases:[
      ],
      swiperOption:{
            spaceBetween: 20,
            //循环
            loop:true,
            //滑动速度
            speed:2000,
            // delay:1000
            slidesPerView: 5,
            navigation: {
                nextEl: '.left_jiantou',
                prevEl: '.right_jiantou',
            },
            autoplay: 2000,
      },
      pagintion: {
        total: 0,
        page_size:6,
        page: 1,
      },
      anliloading:false,
      jingbiaoVisible:false,
      shangchuanVisible:false,
      keywords:'',
      sx:true,
    }
  },
  mounted() {
    this.getbannerlist();
    this.getseriesGallerylist();
    this.getdesignerdemandlist();
    this.getdesignerstarlist();
    this.getclassiccaselist();
    this.getAssumeRole();
  },
  methods: {
    //走马灯
    getbannerlist(){
      bannerlist({}).then(res => {
        console.log(res.data);
          if(res.ok){
              this.bannerlistdata = res.data;
          }
      })
    },
    //系列图库
    getseriesGallerylist(){
      seriesgallerylist({}).then(res => {
        console.log(res.data);
          if(res.ok){
              this.seriesGallerys = res.data;
          }
      })
    },
    //需求展示
    getdesignerdemandlist(){
      designerdemandlist({keywords:this.keywords}).then(res => {
        console.log(res.data);
          if(res.ok){
              this.designerdemanddata = res.data;
              for(let key in this.designerdemanddata){
                let data = this.designerdemanddata[key];
                for(let i = 0 ;i < data.length;i++){
                  if(data[i].onum != null){
                    this.designerdemanddata[key][i].onum = "("+this.designerdemanddata[key][i].onum+")";
                  }
                }
              }
              // designerdemanddata.complete
              this.sx = false;
              this.$nextTick(function () {
                this.sx = true;
              });
          }
      })
    },
    //设计之星列表
    getdesignerstarlist(){
      designerstarlist({}).then(res => {
        console.log(res.data);
          if(res.ok){
            this.designerstars = res.data;
            if(this.designerstars.length > 5){
              this.swiperOption.loop  = true;
            }else{
              this.swiperOption.loop = false;
            }
          }
      })
    },
    //经典案例
    getclassiccaselist(){
      var param = {};
      param.page = this.pagintion.page;
      param.size = this.pagintion.page_size;
      this.anliloading = true;                              
      classiccaselist(param).then(res => {
        console.log(res.data);
        this.anliloading = false;
          if(res.ok){
            this.pagintion.total = res.data.total;
            this.classiccases = res.data.data;
          }
      })
    },
    jingdiananli(id){
      let routeUrl = this.$router.resolve({
          path: 'jlb_anlidata',
          query: {'id': id}
      });
      window.open(routeUrl.href, '_blank');
    },
    zuixingxilie(id){
      let routeUrl = this.$router.resolve({
          path: 'jlb_xiliedata',
          query: {'id': id}
      });
      window.open(routeUrl.href, '_blank');
    },
    shejizhixing(){
      // let routeUrl = this.$router.resolve({
      //     path: 'jlb_anli',
      // });
      // window.open(routeUrl.href, '_blank');
    },
    handleCurrentChange(val) {
      this.pagintion.page = val;
      this.getclassiccaselist();
    },
    shangyige(){
      this.$nextTick(function () {
          this.$refs.mySwiper.swiper.slidePrev();
      });
    },
    xiayige(){
      this.$nextTick(function () {
          this.$refs.mySwiper.swiper.slideNext();
      });
    },
    tuichu_login(){
      this.$router.push({
          path: '/jlb_login',
      });
    },
    //滚动窗口选择需求
    xuanzeonum(e){
      this.xzonum = JSON.parse(e.target.dataset.obj);
    },
    //不动串口选择需求
    xuanzeonum1(item){
      this.xzonum = item;
    },
    //点击材料选项
    downcailiao(id){
      let routeUrl = this.$router.resolve({
          path: 'jlb_cailiao',
          query: {'id': id}
      });
      window.open(routeUrl.href, '_blank');
    },
    //竞标
    showjingbiao(){
      if(this.xzonum.id == null){
        return;
      }
      this.jingbiaoVisible = true;
      this.$nextTick(function () {
          this.$refs.jingbiao.setid(this.xzonum.id);
      });
      
    },
    //关闭竞标
    closejingbiao(){
      this.jingbiaoVisible = false;
    },
    closeshangchuan(){
      this.shangchuanVisible = false;
    },
    Downloaddesigner(){
      designerdownload({id:this.xzonum.id}).then(res => {
        console.log(res.data);
          if(res.ok){
              var path = res.data;
              this.download(path);
          }
      })
    },
    shangchuandesigner(){
      if(this.xzonum.id == null){
        return;
      }
      this.shangchuanVisible = true;
      console.log(this.xzonum);
      this.$nextTick(function () {
          this.$refs.shangchuan.setid(this.xzonum.id,this.xzonum.crm_oid);
      });
    },
    getAssumeRole(){
      assumeRole({}).then(res => {
        if(res.ok){
            var assumedata = res.data.res;
            let OSS = require('ali-oss');
            this.client = new OSS({
                // yourRegion填写Bucket所在地域。以华东1（杭州）为例，Region填写为oss-cn-hangzhou。
                region: 'oss-cn-qingdao',
                // 从STS服务获取的临时访问凭证。临时访问凭证包括临时访问密钥（AccessKeyId和AccessKeySecret）和安全令牌（SecurityToken）。
                accessKeyId: assumedata.Credentials.AccessKeyId,
                accessKeySecret: assumedata.Credentials.AccessKeySecret,
                stsToken: assumedata.Credentials.SecurityToken	,
                // 填写Bucket名称。
                bucket: 'kny-sxy'
            });
        }
      })
    },
    download(path){
        var extention = path.split('/').pop();
        // 配置响应头实现通过URL访问时自动下载文件，并设置下载后的文件名。
        const filename = extention // 自定义下载后的文件名。
        const response = {
            'content-disposition': `attachment; filename=${encodeURIComponent(filename)}`
        }
        // 填写Object完整路径。Object完整路径中不能包含Bucket名称。
        const url = this.client.signatureUrl(path, { response });
        link.href = url;
        link.click() // 下载文件
        URL.revokeObjectURL(url); // 释放内存
    },
    titleSousuo(keywords){
      this.keywords = keywords;
      this.getdesignerdemandlist();
    },
  },
  components: {    //组件
        vueSeamlessScroll,
        MainTitle,
        MainUser,
        JingBiao,
        ShangChuan,
        // Affix
  },
  computed: {
     classOption1 () {
       return {
        step: 0.4, // 数值越大速度滚动越快
        limitMoveNum: 10, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 0, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
      }
    },
    classOption2 () {
       return {
        step: 0.2, // 数值越大速度滚动越快
        limitMoveNum: 10, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
      }
    }
  }
}
</script>
